<template>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="厂商支付单管理" name="first">
      <el-card class="box-card">
        <div>
          <!-- 搜索头 -->
          <p>
            <span class="span1"> 账期: </span>
            <el-select v-model="billDate" @change="listPayMent">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in listOptData" :label="item.billDate" :value="item.billDate"></el-option>
            </el-select>
            <span class="span1"> 支付状态: </span>
            <el-select v-model="billType" @change="listPayMent">
              <el-option value="" label="全部"></el-option>
              <el-option value="1" label="未支付"></el-option>
              <el-option value="2" label="已支付"></el-option>
            </el-select>
            <span class="span1"> 支付单类型: </span>
            <el-select v-model="billUserType" @change="listPayMent">
              <el-option value="" label="全部"></el-option>
              <el-option value="2" label="厂商"></el-option>
              <el-option value="1" label="服务商"></el-option>
            </el-select>
            <el-button @click="listPayMent"  icon="el-icon-search"></el-button>
          </p>
          <!-- 搜索头 -->
          <el-row :span="19" type="flex">
            <el-col>
              <el-table
                  :data="listData"
                  style="width: 100%;height:650px">
                <el-table-column
                    label="结算账期"
                    width="160">
                  <template slot-scope="scope">
                    <span class="outPutSpan" @click="openPayMentByDateWindow(scope.row)">{{scope.row.billDate}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="支付状态"
                    width="80">
                  <template slot-scope="scope">
                    <span>{{scope.row.billType===2?'已支付':'未支付'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="结算单量"
                    width="120">
                  <span>这里是订单数量</span>
                </el-table-column>
                <el-table-column
                    prop="billAmountPayable"
                    label="应付金额"
                    width="120">
                </el-table-column>
                <el-table-column
                  prop="billPayed"
                  label="已付金额"
                  width="120">
              </el-table-column>
                <el-table-column
                    label="身份类型"
                    width="120">
                  <template slot-scope="scope">
                    <span>{{scope.row.billUserType === 2?'厂商':scope.row.billUserType === 1?'服务商':'未知'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                  <template slot-scope="scope">
                    <span class="outPutSpan" @click="exportExcel(scope.row)">下载明细</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- 分页开始 -->
          <div class="block" style="margin-top: 20px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size=pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
          </div>

          <el-dialog
              title="支付单详情"
              :visible.sync="PayMentByDateWindow"
              width="60%"
              :before-close="handleClose">
            <div style="width: 100%;height:40px;border-bottom:1px solid lightgray">
              <p>
                <span class="span2">结算账期 {{OneDate.billDate}}</span>
                <span class="span2">结算单数量:{{ordersByDate.length}}</span>
                <span class="span2">结算应付金额:{{allOrderMonery}}元</span>
<!--                <span class="span2">结算实付金额:元</span>-->
              </p>
            </div>
            <el-table
                :data="ordersByDate"
                style="width: 100%;height:500px">
              <el-table-column
                  prop="orderId"
                  label="订单号"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="customerName"
                  label="客户姓名"
                  width="120">
              </el-table-column>
              <el-table-column
                  label="地区"
                  width="160">
                <template slot-scope="scope">
                  <span>{{scope.row.province}} {{scope.row.city}} {{scope.row.area}}</span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="详细地址"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="makeAppointmentTime"
                  label="创建时间"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="completeTime"
                  label="完成时间"
                  width="160">
              </el-table-column>
              <el-table-column
                  label="订单金额"
                  width="100">
                <template slot-scope="scope">
                  <span>{{scope.row.amountPayable}} 元</span>
                </template>
              </el-table-column>
              <el-table-column
                  label="订单状态"
                  width="100">
                <template slot-scope="scope">
                  <span>{{scope.row.orderType === 0?"未派送":scope.row.orderType === 1?"已派送":scope.row.orderType === 2?"未完成":scope.row.orderType === 0?"已完成":"未知"}}</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页开始 -->
            <div class="block" style="margin-top: 20px;">
              <el-pagination
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size=pageSize2
                  layout="total, sizes, prev, pager, next, jumper"
                  :total=total2>
              </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="PayMentByDateWindow = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
export default {
  data () {
    return {
      billDate: '', // 结算日期
      activeName: 'first',
      pageSize: 5,
      pageSize2:5,
      total: 0,
      total2: 0,
      pageNum: 1,
      pageNum2: 1,
      billType: '',
      billUserType: '',
      currentPage: 0,
      listData: [], // 支付单数据
      PayMentByDateWindow: false, // 详情弹窗
      listOptData: [], // 下拉日期数据
      listPayMents:[], // 通过日期查询到的所有订单
      OneDate: [], // 支付单信息
      ordersByDate: [], // 详情页订单s
      allOrderMonery: 0, // 详情页订单金额
    }
  },
  mounted(data) {
    this.listPayMent()
  },
  methods: {
    exportExcel(data){
      this.request.get('memberZjx/orderTable/export?id='+data.id+'&date='+data.billDate)
      console.log(data)
    },
    openPayMentByDateWindow(data){
      this.OneDate = data
      this.request.get('memberZjx/orderTable/listByDate',{
        params:{
          pageSize:this.pageSize2,
          pageNum:this.pageNum2,
          total2:this.total2,
          date: data.billDate
        }
      }).then(res => {
        this.ordersByDate = res.data.records
        this.total2 = res.data.total
        this.allOrderMonery = 0
        for (var i = 0;i<res.data.records.length;i++){
          this.allOrderMonery +=res.data.records[i].amountPayable
        }
      })
      this.PayMentByDateWindow = true
    },
    listPayMent () {
      this.request.get('memberZjx/facturerPayment/listPayMent',{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          billUserType: this.billUserType,
          billDate: this.billDate,
          billType: this.billType
        }
      }).then(res => {
        if (res){
          this.listData = res.data.records
          this.total = res.data.total
          this.listPayMentOpt()
        }
      })
    },
    listPayMentOpt () {
      this.request.post('memberZjx/facturerPayment/listBillDate').then(res => {
        if (res){
          this.listOptData = res.data
        }
      })
    },
    handleClick(tab, event) {
    },
    myMessage (type, message) { // 弹窗提示
      this.$message({
        message: message,
        type: type
      })
    },
    handleSizeChange (val) { // 页码
      this.pageSize = val
      this.listPayMent()
    },
    handleCurrentChange (val) { // 页数
      this.pageNum = val
      this.listPayMent()
    },
    handleSizeChange2 (val) { // 页码
      this.pageSize = val
      this.openPayMentByDateWindow()
    },
    handleCurrentChange2 (val) { // 页数
      this.pageNum = val
      this.openPayMentByDateWindow()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style>
.outPutSpan{
  color: blue;
  cursor: pointer;
}
.span1{
  font-size: 10px;
}
.span2{
  font-size: 10px;
  margin-left: 100px;
}
</style>
